<template>
  <div class="home-page">
    <div class="header">
      <h3>霸霸网盘</h3>
      <p>专为课设开发的小型存储服务</p>
      <p>安全、快速、便捷的云存储服务</p>
    </div>
    <div class="features">
      <h3>我们的技术</h3>
      <ul>
        <li><strong>前端技术:</strong> Vue3, Vue Router, Vuex</li>
        <li><strong>后端技术:</strong> PHP, Laravel, MySql</li>
        <li><strong>云存储:</strong> AWS S3, 阿里云OSS等</li>
        <li><strong>安全性:</strong> 使用HTTPS协议，确保数据安全</li>
      </ul>
    </div>
    <div class="other-info">
      <h3>其他信息</h3>
      <p>随时随地，尽享云端文件访问的便捷。</p>
      <p>
        还没有账号？<a href="javascript:;" @click="navigateToRegister">
          立即注册
        </a>
        |
        <a href="javascript:;" @click="navigateToLogin">登录</a>
      </p>
    </div>
  </div>
  <!-- 页尾 -->
  <FooterCompoent />
</template>

<script>
// eslint-disable-next-line no-unused-vars
import axios from "axios";
import FooterCompoent from "@/components/FooterCompoent.vue";

export default {
  name: "HomeView",
  components: {
    FooterCompoent,
  },
  data() {
    return {};
  },
  methods: {
    navigateToRegister() {
      this.$router.push("/register"); // 跳转到注册页面
    },
    navigateToLogin() {
      this.$router.push("/login"); // 跳转到登录页面
    },
  },
};
</script>

<style scoped>
.home-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  font-family: Arial, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 10px;
}

.header p {
  font-size: 1.2em;
  color: #666;
}

.features {
  margin-bottom: 40px;
}

.features h2 {
  font-size: 1.8em;
  color: #333;
  margin-bottom: 20px;
}

.features ul {
  list-style-type: none;
  padding: 0;
}

.features li {
  margin-bottom: 15px;
  color: #666;
}

.features li strong {
  color: #333;
}

.other-info {
  text-align: center;
}

.other-info h2 {
  font-size: 1.8em;
  color: #333;
  margin-bottom: 10px;
}

.other-info p {
  color: #666;
  margin-bottom: 10px;
}

.other-info a {
  color: #007bff;
  text-decoration: none;
  margin-left: 5px;
}
</style>
